<template>
  <div class="add-dialog-wrapper">
    <el-dialog
      width="80%"
      :fullscreen="true"
      title="添加任务"
      :visible.sync="ifDialog"
      @close="handleClose"
    >
      <el-form :model="form" :rules="rules" label-position="left">
        <el-form-item label="客户电话：" prop="userPhone" label-width="180px">
          <el-input
            placeholder="输入客户电话"
            v-model="form.userPhone"
            class="input-25"
          ></el-input>
        </el-form-item>

        <el-form-item label="客户名称：" prop="userName" label-width="180px">
          <el-input
            placeholder="输入客户名称"
            v-model="form.userName"
            class="input-25"
          ></el-input>
        </el-form-item>

        <el-form-item
          class="inline-block"
          label="服务大类："
          label-width="180px"
          prop="mainServiceType"
        >
          <el-select v-model="form.mainServiceType">
            <el-option
              v-for="item in mainServiceTypeOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <span style="margin: 0 10px 0 50px;">服务小类：</span>

        <el-form-item prop="subServiceType" class="inline-block">
          <el-select v-model="form.subServiceType">
            <el-option
              v-for="item in subServiceTypeOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <p></p>
        <el-form-item
          class="inline-block"
          label="客户要求服务开始时间："
          label-width="180px"
          prop="userRequestServiceStartTime"
        >
          <el-date-picker
            v-model="form.userRequestServiceStartTime"
            type="datetime"
            placeholder="选择客户要求开始时间"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <span class="user-request-server-start-time-text"
          >客户要求服务结束时间：</span
        >
        <el-form-item class="inline-block" prop="userRequestServiceEndTime">
          <el-date-picker
            v-model="form.userRequestServiceEndTime"
            type="datetime"
            placeholder="选择客户要求结束时间"
            align="right"
          >
          </el-date-picker>
        </el-form-item>

        <p></p>

        <el-form-item
          class="inline-block"
          label="客户地址："
          label-width="180px"
          prop="userProvince"
        >
          <el-select
            class="select-12"
            @change="handleChooseProvince"
            v-model="form.userProvince"
          >
            <el-option
              v-for="item in chinaProvinces"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <span class="address-category-text">省</span>
        <el-form-item class="inline-block" prop="userCity">
          <el-select
            class="select-15"
            @change="handleChooseCity"
            v-model="form.userCity"
          >
            <el-option
              v-for="item in chooseProvinceCities"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <span class="address-category-text">市</span>
        <el-form-item class="inline-block" prop="userCounty">
          <el-select
            class="select-15"
            @change="handleChooseCounty"
            v-model="form.userCounty"
          >
            <el-option
              v-for="item in chooseCityCounties"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <span class="address-category-text">区</span>
        <el-form-item class="inline-block" prop="userCountry">
          <el-select class="select-18" v-model="form.userCountry">
            <el-option
              v-for="item in chooseCountyCountries"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <span class="address-category-text">街道</span>
        <el-form-item class="inline-block" prop="userCommunity">
          <el-input
            class="input-20"
            placeholder="请输入详细社区"
            v-model="form.userCommunity"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="订单内容："
          prop="orderContent"
          label-width="180px"
        >
          <el-input
            v-model="form.orderContent"
            class="input-25"
            type="textarea"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="是否需要回访："
          prop="needVisitAgain"
          label-width="180px"
        >
          <el-select class="select-12" v-model="form.needVisitAgain">
            <el-option
              v-for="item in needVisitAgainOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="预定服务开始时间："
          prop="predictServiceStartTime"
          label-width="180px"
          class="inline-block"
        >
          <el-date-picker
            v-model="form.predictServiceStartTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <span class="user-request-server-start-time-text"
          >预定服务结束时间：</span
        >
        <el-form-item class="inline-block" prop="predictServiceEndTime">
          <el-date-picker
            v-model="form.predictServiceEndTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item class="footer">
          <el-button
            class="save-btn"
            @click="submit"
            type="primary"
            size="small"
            >保存</el-button
          >
          <el-button size="small" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import data from './data';
import methods from './methods';
import props from './props';
import lifecircle from './lifecircle';
export default {
  name: 'AddDialog',
  methods,
  props,
  ...lifecircle,
  data
};
</script>

<style scoped lang="less">
.inline-block {
  display: inline-block;
}
.input-20 {
  width: 200px;
}
.input-25 {
  width: 25%;
}
.select-12 {
  width: 120px;
}
.select-15 {
  width: 150px;
}
.select-18 {
  width: 180px;
}
.address-category-text {
  margin: 0 7px;
}
.user-request-server-start-time-text {
  margin-left: 55px;
}
.footer {
  margin-top: 60px;
  .save-btn {
    margin: 0 100px 0 300px;
  }
}
</style>
